import React, { useEffect, } from "react";
import { useDispatch, useSelector } from 'umi'
import styles from "./addQuestions.less"
import { Select, Form, Input, Button, message } from 'antd';
import { IQuestionType, IExamType, ISubject } from '@/utils/interface'
import Editor from 'for-editor'
import { IQuestionForm } from "@/utils/interface";

const addQuestions: React.FC = () => {
  const { Option } = Select
  const [form] = Form.useForm();
  const inputLayout = {
  };
  const editorLayout = {
    wrapperCol: { span: 6 }
  }
  function setValues() {
    const values: { [key: string]: string } = {};
    if (questionTypes.length) {
      values.questions_type_id = questionTypes[0].questions_type_id;
    }
    if (subjects.length) {
      values.subject_id = subjects[0].subject_id;
    }
    if (examTypes.length) {
      values.exam_id = examTypes[0].exam_id;
    }
    form.setFieldsValue(values)
  }
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch({
      type: 'question/getQuestionType'
    })
    dispatch({
      type: 'question/getExamSubject'
    })
    dispatch({
      type: 'question/getExamType'
    })
  }, [])
  const { questionTypes } = useSelector(module => (module as { question: { questionTypes: IQuestionType[] } }).question)
  const { subjects } = useSelector(module => (module as { question: { subjects: ISubject[] } }).question)
  const { examTypes } = useSelector(module => (module as { question: { examTypes: IExamType[] } }).question)
  const { user_id } = useSelector(module => (module as { user: { userInfo: { user_id: string } } }).user.userInfo)
  useEffect(() => {
    setValues()
  }, [questionTypes, subjects, examTypes]);
  function onFinish(values: IQuestionForm) {
    let result = dispatch({
      type: 'question/submitQuestion',
      payload: { ...values, user_id }
    });
    (result as unknown as Promise<{ code: number, msg: string }>).then(res => {
      if (res.code === 1) {
        message.success(res.msg);
      } else {
        message.error(res.msg);
      }
      form.resetFields();
      setValues()
    })
  }
  return <Form className={styles.wrap} onFinish={onFinish} form={form} initialValues={{
    title: '',
    questions_stem: '',
    questions_answer: '',
  }}
  >
    <h1>添加试题 </h1>
    <div className={styles.cotent}>
      <p>题目信息 </p>
      <label htmlFor="" > 题干 </label>
      <Form.Item
        {...inputLayout}
        name="title"
        rules={[{ required: true, message: '请输入试题题干!' }]}
      >
        <Input />
      </Form.Item>
      <label htmlFor="" > 题目主题 </label>
      < Form.Item
        name="questions_stem"
        rules={[{ required: true, message: '请输入试题主题!' }]}
      >
        <Editor />
      </Form.Item>
      < label htmlFor="" > 请选择考试类型：</label>
      <Form.Item
        name="exam_id"
        {...editorLayout}
      >
        <Select>{
          (examTypes as IExamType[]).map((item, index) => {
            return <Option key={index} value={item.exam_id} > {item.exam_name} </Option>
          })
        }</Select>
      </Form.Item >

      < label htmlFor="" > 请选择课程类型：</label>
      < Form.Item
        name="subject_id"
        {...editorLayout}
      >
        <Select>{
          (subjects as ISubject[]).map((item, index) => {
            return <Option key={index} value={item.subject_id} > {item.subject_text} </Option>
          })
        }</Select>
      </Form.Item>

      <label htmlFor="" > 请选择题目类型：</label>
      < Form.Item
        name="questions_type_id"
        {...editorLayout}
      >
        <Select>{
          (questionTypes as IQuestionType[]).map((item, index) => {
            return <Option key={index} value={item.questions_type_id} > {item.questions_type_text} </Option>
          })
        }</Select>
      </Form.Item>

      <label htmlFor="" > 答案信息 </label>
      < Form.Item
        name="questions_answer"
        rules={[{ required: true, message: '请输入试题答案!' }]}
      >
        <Editor />
      </Form.Item>

      <Button type="primary" htmlType="submit" className={styles.btn} >
        提交
    </Button>
    </div>
  </Form>

}

export default addQuestions